<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <!-- ele 的引入放在vue下面-->
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <script src="js/address.js"></script>
    <link href="css/common.css" rel='stylesheet'>
    <script src="/js/common.js"></script>
    <link href="css/login.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>

</head>

<body>
<div id="app">
    <common @logined="logined"></common>

    <template>
        <div class="ranking-container">
            <!-- 顶部分类导航 -->
            <div class="top-categories">
                <div class="category active">
                    <i class="el-icon-star-on"></i>
                    <span>综合热门</span>
                </div>
<!--                <div class="category">-->
<!--                    <i class="el-icon-time"></i>-->
<!--                    <span>每周必看</span>-->
<!--                </div>-->
<!--                <div class="category">-->
<!--                    <i class="el-icon-video-camera-solid"></i>-->
<!--                    <span>入站必刷</span>-->
<!--                </div>-->
<!--                <div class="category">-->
<!--                    <i class="el-icon-trophy"></i>-->
<!--                    <span>排行榜</span>-->
<!--                </div>-->
<!--                <div class="category">-->
<!--                    <i class="el-icon-headset"></i>-->
<!--                    <span>全站音乐榜</span>-->
<!--                </div>-->
            </div>

            <!-- 视频分类标签 -->
            <div class="video-tags">
                <el-tag @click="getHotVideo">全部</el-tag>
                <el-tag v-for="b in board" @click="getHotVideoByBoard(b.id)">{{b.bname}}</el-tag>
            </div>

            <!-- 排行榜说明 -->
            <div class="ranking-description">
                <i class="el-icon-info"></i>
                <span>数据不是实时更新，此排行不代表视频最终热度</span>
            </div>

            <!-- 视频列表 -->
            <div class="video-list">
                <div v-for="(video, index) in videos" :key="video.id" class="video-item">
                    <div class="video-rank">{{ index + 1 }}</div>
                    <div class="video-cover">
                        <img :src="video.image" alt="封面" @click="location.href = 'video.html?id=' + video.id">
                        <div class="video-play-count">
                            <i class="el-icon-video-play"></i>
                            <span>{{ formatNumber(video.vcount) }}</span>
                        </div>
<!--                        <div class="video-duration">{{ video.duration }}</div>-->
                    </div>
                    <div class="video-info">
                        <h3 class="video-title">{{ video.vname }}</h3>
                        <div class="video-author">
                            <i class="el-icon-user"></i>
                            <span>{{ video.name }}</span>
                        </div>
                        <div class="video-stats">
            <span class="video-data">
              <i class="el-icon-thumb"></i>
              {{ formatNumber(video.likes) }}
            </span>
            <span class="video-data">
              <i class="el-icon-view"></i>
              {{ formatNumber(video.vcount) }}
            </span>
            <span class="video-data">
              <i class="el-icon-chat-dot-round"></i>
              {{ formatNumber(video.danmuCount) }}
            </span>
            <span class="video-data">
              <i class="el-icon-star-off"></i>
              {{ formatNumber(video.collect) }}
            </span>
<!--            <span class="video-data">-->
<!--              <i class="el-icon-video-camera"></i>-->
<!--              {{ formatNumber(video.vcount) }}-->
<!--            </span>-->
                        </div>
                        <div class="video-desc">{{ video.intro }}</div>
                    </div>
                </div>
            </div>

            <!-- 加载更多 -->
            <div class="load-more" v-if="hasMore" @click="loadMore">
                <el-button type="text" :loading="loading">加载更多</el-button>
            </div>
        </div>
    </template>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            videos: [],
            loading: false,
            hasMore: true,
            myinfo : {},
            page : 1,
            pageSize : 6,
            board : [],
            // total : 0,

        },
        created() {
            this.getHotVideo();
            this.getBoard();
        },
        methods : {
            logined(myinfo){
                this.myinfo = myinfo
            },
            formatNumber(num) {
                if (num >= 10000) {
                    return (num / 10000).toFixed(1) + '万';
                }
                return num;
            },
            loadMore() {
                this.loading = true;
                // 模拟异步加载
                setTimeout(() => {
                    // 这里应该是API请求获取更多数据
                    // 模拟添加新数据
                    this.page += 1;
                    this.getHotVideo()
                    this.loading = false;
                    // 假设最多加载30条
                    if (this.videos.length >= 30) {
                        this.hasMore = false;
                    }
                }, 1000);
            },
            getHotVideo(){
                axios.get("/video/getHotVideo",{
                    params : {
                        page : this.page,
                        pageSize : this.pageSize
                    }
                }).then(res=>{
                    if(res.data.code == 1){
                        this.videos = res.data.data
                        this.hasMore = true;
                    }
                })
            },
            getBoard(){
                axios.get("board/getBoard").then(res=>{
                    this.board = res.data
                })
            },
            getHotVideoByBoard(bid){
                axios.get("video/getHotVideoByBoard?bid="+bid).then(res=>{
                    if(res.data.code == 1){
                        this.videos = res.data.data
                        this.hasMore = false
                    }
                })
            }
        }
    })
</script>

<style>
    .ranking-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .top-categories {
        display: flex;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

    .category {
        display: flex;
        align-items: center;
        margin-right: 30px;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 4px;
        color: #666;
    }

    .category i {
        margin-right: 5px;
        font-size: 18px;
    }

    .category.active {
        background-color: #f0f7ff;
        color: #00a1d6;
    }

    .video-tags {
        margin-bottom: 20px;
    }

    .video-tags .el-tag {
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .ranking-description {
        font-size: 12px;
        color: #999;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }

    .ranking-description i {
        margin-right: 5px;
    }

    .video-list {
        display: flex;
        flex-direction: column;
    }

    .video-item {
        display: flex;
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

    .video-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .video-rank {
        width: 40px;
        font-size: 18px;
        font-weight: bold;
        color: #fb7299;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .video-cover {
        position: relative;
        width: 160px;
        height: 100px;
        margin-right: 15px;
        border-radius: 4px;
        overflow: hidden;
    }

    .video-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video-play-count {
        position: absolute;
        top: 5px;
        left: 5px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 2px 5px;
        border-radius: 2px;
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .video-play-count i {
        margin-right: 3px;
        font-size: 12px;
    }

    .video-duration {
        position: absolute;
        bottom: 5px;
        right: 5px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 2px 5px;
        border-radius: 2px;
        font-size: 12px;
    }

    .video-info {
        flex: 1;
    }

    .video-title {
        font-size: 16px;
        margin: 0 0 10px 0;
        color: #222;
        font-weight: normal;
        line-height: 1.4;
    }

    .video-author {
        font-size: 12px;
        color: #999;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
    }

    .video-author i {
        margin-right: 5px;
    }

    .video-stats {
        display: flex;
        margin-bottom: 8px;
    }

    .video-data {
        font-size: 12px;
        color: #999;
        margin-right: 15px;
        display: flex;
        align-items: center;
    }

    .video-data i {
        margin-right: 3px;
    }

    .video-desc {
        font-size: 13px;
        color: #666;
        line-height: 1.5;
    }

    .load-more {
        text-align: center;
        margin-top: 20px;
    }

    .load-more .el-button {
        color: #00a1d6;
    }
</style>
</style>

</body>
</html>